<template>
  <div>
    <h1>展示学员信息区域</h1>
    <table>
      <thead>
        <th>编号</th>
        <th>姓名</th>
        <th>手机号</th>
        <th>时间</th>
        <th>操作</th>
      </thead>
      <tbody>
        <tr v-for="(item, index) in props.list" :key="item.id">
          <td>{{ index }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.tel }}</td>
          <td>{{ item.time }}</td>
          <td>
            <button class="btn" @click="edit(item, index)">编辑</button>
            <button @click="del(index)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from "vue";
const props = defineProps(["list"]);
//删除
const emits = defineEmits(["del", "edit"]);
function del(index) {
  emits("del", index);
}
//编辑回填
function edit(item, index) {
  emits("edit", item);
}
</script>

<style lang="scss" scoped>
table {
  width: 100%;
  border: 1px solid;
  text-align: center;
  border-collapse: collapse;
}
th,
td {
  border: 1px solid #000000;
  text-align: center;
  height: 50px;
}
.btn {
  background-color: #107a55;
  color: #fff;
}
button {
  border-radius: 5px;
  border: 0;
  width: 50px;
  height: 30px;
  background-color: red;
  margin-left: 10px;
  color: #fff;
}
</style>